<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="css/common/common.css"/>
    <link rel="stylesheet" type="text/css" href="css/publish.css"/>
    <link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
</head>
<body>
<div id="web">
    <header class="clearfix">
        <a href="../indexSM.html"><i class="iconfont icon-youbian1"></i></a>
        <p class="fr"><a href=""><span class="glyphicon glyphicon-send"></span></a></p>
        <h4>发布</h4>
    </header>
    <section>
        <article>
            <textarea placeholder="为您的织图添加点描述吧"></textarea>
            <div class="add clearfix">
                <div class="upmenu fl"><img src="img/publish/3.jpg"/></div>
                <div class="fl place"><span class="glyphicon glyphicon-map-marker"></span><span class="address">佛山市南海区商业街</span>
                </div>
            </div>
            <div class="item clearfix">
                <span>选择添加到圈子</span>
                <a href=""><i class="iconfont icon-youbian"></i></a>
            </div>
            <ul class="ul_bottom" id="ul_bottom">
                <li>
                    <span>是否添加到才艺圈子</span>
                    <div class="on-off fr">
                        <button></button>
                    </div>
                </li>
            </ul>
            <p class="share">分享到：</p>
            <div class="share_to">
                <div class="wrap">
                    <div><img src="img/publish/weibo.png"/></div>
                </div>
                <div class="wrap">
                    <div><img src="img/publish/qqzone.png"/></div>
                </div>
                <div class="wrap">
                    <div><img src="img/publish/wechat.png"/></div>
                </div>
            </div>
        </article>
    </section>
    <div id="moreWrap" class="more_wrap">
        <ul class="list" id="list">
            <li>视频链接</li>
            <li>音乐链接</li>
            <li>相册</li>
            <li>相机</li>
            <li>取消</li>
        </ul>
    </div>
</div>
<script src="js/getFont.js"></script>
<script src="js/getClass.js"></script>
<script src="js/video.js"></script>
<script>
    var bUl=document.getElementById('ul_bottom');
    var bLi=bUl.getElementsByTagName('li');console.log(bLi);

    for(var i=0;i<bLi.length;i++){

        bLi[i].oBtn=true;
                bLi[i].onmouseover=function(){
                    var This=this;
                    var bDiv=this.getElementsByTagName('div')[0];
                    var bButton=bDiv.getElementsByTagName('button')[0];
                    bButton.onclick=function(){
                        if(This.bBtn){
                            This.className='active';
                            This.bBtn=false;
                        }else{
                            This.className='';
                            This.bBtn=true;
                        }

            }
        }
    }
</script>
</body>
</html>